<template>
  <div>
    <ul class="dianpu_info">
      <li>
        <span class="hong">*</span><span class="jiacu">联系人</span>
        <van-field
          v-model="storeUser"
          name="store_user"
          placeholder="请输入联系人姓名"
          :rules="[{ required: true, pattern: hanzi , message: '请输入正确的姓名' }]"
        />
      </li>
      <li>
        <span class="hong">*</span><span class="jiacu">联系电话</span>
        <van-field
          v-model="storePhone"
          name="store_phone"
          placeholder="请输入联系电话"
          :rules="[{ required: true, pattern: phone , message: '请输入正确的联系电话' }]"
        />
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'CompanyContact',
  props: {
    dataL: Object
  },
  data () {
    return {
      storeUser: '',
      storePhone: '',
      hanzi: /[\u4e00-\u9fa5]/,
      phone: /^(13[0-9]|14[5-9]|15[012356789]|166|17[0-8]|18[0-9]|19[8-9])[0-9]{8}$/
    }
  },
  watch: {
    'dataL': function (dataL) {
      this.storeUser = this.dataL.store_user
      this.storePhone = this.dataL.store_phone
    }
  }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus" scoped>
.dianpu_info
  width 100%
  height auto
  box-shadow 0px 0px 5px 0px rgba(4, 0, 0, 0.1)
  border-radius .1rem /* 5/50 */
  padding 0 .3rem /* 15/50 */
  padding-bottom .5rem /* 25/50 */
  li
    width:100%
    font-size .26rem /* 13/50 */
    padding-top .5rem /* 25/50 */
    .hong
      font-size .22rem /* 11/50 */
      color #F6360A
    .right
      line-height .34rem /* 17/50 */
      display flex
      .van-switch
        width .76rem
        height .34rem
        margin-left .2rem
        border:0px
        background-color:#f8f8f8
        /deep/ .van-switch__node
          height .34rem
          width .34rem
      .van-switch--on
        background linear-gradient(90deg, #F14510, #EE340F)
        /deep/ .van-switch__node
          transform: translateX(.42rem);
  .zhuangrangfei
    padding-top .3rem
    .van-field
      margin-top 0px
  .van-field
    width 100%
    line-height .8rem
    border 1px solid rgba(0,0,0,.1)
    border-radius .1rem /* 5/50 */
    position relative
    margin-top .3rem /* 15/50 */
    padding .1rem /* 5/50 */ .3rem /* 15/50 */
  .van-field:after
    border-bottom:0
  .van-field:before
    position absolute
    font-size .3rem /* 15/50 */
    right .3rem /* 15/50 */
  .van-field.m:before
    content '㎡'
  .van-field.y_y:before
    content '元/月'
  .van-field.wy:before
    content '万元'
  .no_border
    border 1px solid rgba(0,0,0,.1)
    border-radius .1rem /* 5/50 */
    margin-top .3rem /* 15/50 */
    .van-field
      width 50%
      border 0rem /* 0/50 */
      float left
      margin-top 0rem /* 15/50 */
      .van-stepper
        margin-left .4rem /* 20/50 */
    .van-cell::after
      border-bottom 0px
</style>
